CSS flex布局 | 您所在的位置:网站首页 › CSS Layout › CSS flex布局 |
1. 介绍
1.1 说明
flex布局,也称为flex弹性布局;主要目的是使item的宽度、高度按一定顺序填充父容器的可用空间。 示例 注意:在下文中,将以parent指代父容器,item指代容器内的项。 1.2 浏览器支持情况 IE 11才完全支持flex布局方案,在IE 10的CSS中可使用-ms-前缀支持部分flex布局,但只能使用旧的flex布局属性:CSS Flexible Box Layout Module(2012 syntax) IE Edge Firefox Chrome Android Chrome iOS Safari11 10 -ms- all28 18 -moz- 29 21 -webkit- all all
2. 父容器可使用的flex属性 直接进入正题,先介绍父容器可使用flex布局相关的属性。 2.1 display: flex | inline-flex要创建一个flex容器,必须将父容器样式中的display属性设置为 flex 或 inline-flex。 .parent { display: flex; /* or inline-flex */ }2.2 flex-direction 说明:设置item展示的方向。 语法: flex-direction: row | row-reverse | column | column-reverse;row 默认值:item显示在一行,从左到右依次展示。 row-reverse:item显示在一行,从右到左依次展示。 column:item显示在一列,从上到下依次展示。 column-reverse:item显示在一列,从下到上依次展示。 示例: 2.3 flex-wrap 说明:当item在一行展示不下时,设置换行显示的方式。 场景:item的宽度之和大于父容器的宽度。 语法: flex-wrap: nowrap | wrap | wrap-reverse;nowrap 默认值:item不会换行。 wrap:按照item本身的宽度展示,若当前行展示不下时会换一行展示。 wrap-reverse:同wrap,不过是按相反方向换行展示item。 示例: 2.4 flex-flow 说明:flex-direction flex-wrap 的简写方式 语法: flex-flow: flex-direction flex-wrap;默认值:row nowrap 2.5 设置item对齐的属性 说明:parent(父容器) 控制 item 的对齐方式的属性有justify-content、align-items、align-content。 justify-content:控制所有item在main axis(主轴)上的对齐方式。 align-items:控制所有item在cross axis(交叉轴)的对齐方式。 align-content:当 flex-wrap:wrap* 时(即item换行排列),控制item在cross axis(交叉轴)上的对齐方式。 main axis(主轴) 与 cross axis(交叉轴)main axis(主轴):指的是与flex-direction设定的值方向一致的轴,如flex-direction:row;那么主轴就是横轴。 cross axis(交叉轴):与main axis(主轴)交叉的轴,如主轴为横轴,交叉轴就是纵轴。 轴的头部和尾部main-start:main axis(主轴)的头部。 main-end:main axis(主轴)的尾部。 cross-start:cross axis(交叉轴)的头部。 cross-end:cross axis(交叉轴)的尾部。 1) justify-content 说明:控制所有item在main axis(主轴)上的对齐方式。 语法: justify-content: flex-start | flex-end | center | space-between | space-around;flex-start 默认值:item从 main axis(主轴)头部开始。 flex-end:item从 main axis(主轴)尾部开始。 center:item在 main axis(主轴)居中展示。 space-between:item均匀的分布在 main axis(主轴)上,其中第一个在 main axis(主轴)头部,最后一个在 main axis(主轴)尾部。 space-around:item分布在 main axis(主轴)上。每个item的左右间隔是相等的。如每个item左右间隔为15px,第1个item与开始初间隔15px,第1个与第2个item间隔30px。 space-evenly:item均匀分布在 main axis(主轴)上。 示例: 参考:MDN:Aligning Items in a Flex Container 2) align-items 说明:控制所有item在cross axis(交叉轴)的对齐方式。 语法: align-items: flex-start | flex-end | center | baseline | stretch;stretch 默认值:item高度撑开到整个cross axis(交叉轴)。 flex-start:item头对齐在cross axis(交叉轴)的开始处。 flex-end:item尾对齐在cross axis(交叉轴)的结尾处。 center:item垂直居中。 baseline:根据内容基线对齐。 示例: 3)align-content 说明:当 flex-wrap:wrap* 时(即item换行排列),控制item在cross axis(交叉轴)曲线上的对齐方式。 语法: align-content: flex-start | flex-end | center | space-between | space-around | stretch;stretch 默认值:item高度撑开到整个cross axis(交叉轴)。 flex-start:item头对齐在cross axis(交叉轴)的开始处。 flex-end:item尾对齐在cross axis(交叉轴)的结尾处。 center:item垂直居中。 space-between:item均匀的分布在cross axis(交叉轴)上,其中第一个在cross axis(交叉轴)头部,最后一个在cross axis(交叉轴)尾部。 space-around:item分布在cross axis(交叉轴)上。每个item的上下间隔是相等的。。如每个item上下间隔为15px,第1个item与开始初间隔15px,第1个与第2个item间隔30px。 示例: 3. item可使用的flex属性 3.1 item的默认宽度、高度 学习item可使用的flex属性前,首先要知道默认情况下item的宽度、高度,以父容器 flex-direction:row 为例: 1)父容器设置了height,而item没有设置,那么item的height会填满父容器的height。因为默认情况下parent设置item的样式为align-items : stretch。 2)父容器未设置height,某个item设置了height,其他item的height会等于item中最大的height。 3)父容器和item都没有设置height,item会根据内容大小设置height,其他item的height会等于item中最大的height。 3.2 order 说明:默认情况下,item按HTML代码的顺序排列。但order属性可以控制item在父容器中展现的顺序。 语法: order: ; /* default is 0 */参考:MDN:Ordering Flex Items 3.3 flex-basis 说明:设置item的初始化大小。 语法: flex-basis: number | auto;auto 默认值:根据内容区域的设置大小。 number :可以为具体数字或百分比。 3.4 flex-grow 说明:指定item的瓜分剩余空间的占比;当前item的剩余空间占比 = current.flex-grow / allI.flex-grow 之和。 语法: flex-grow: ; /* default 0 */number 默认0:指定item如何瓜分剩余空间。 3.5 flex-shrink 说明: item缩减的占比 语法: flex-shrink: ; /* default 1 */number:默认1; 3.6 flex 说明:flex-grow flex-shrink flex-basis 的简写方式 语法: flex: flex-grow flex-shrink flex-basis;默认值:0 1 auto 4. DEMO 地址:https://codepen.io/polk6/pen/aGwwMQ 5.使用场景 5.1 自适应布局 说明:指定的item可以随着父容器的大小一起改变。 示例: .parent { position: absolute; display: flex; width: 100%; height: 100%; } .left { width: 200px; height: 100%; background-color: #72e4a0; } .right { flex: 1; /* or flex-grow: 1 */ height: 100%; background-color: #9dc3e6; }5.2 居中布局 说明:包括水平居中、垂直居中以及水平垂直居中。 示例:水平垂直居中 .parent {width: 200px;height: 100px;position: relative;background-color: #374858;} .item {width: 100px;height: 50px;background-color: #9dc3e6;} .parent { display: flex; justify-content: center; align-items: center; }6. 参考资料 w3schools CSS flex Property:https://www.w3schools.com/cssref/css3_pr_flex.asp A Complete Guide to Flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ W3C CSS Flexible Box Layout:https://www.w3.org/TR/css-flexbox-1/ MDN FlexBox:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
|
CopyRight 2018-2019 实验室设备网 版权所有 |